<template>
  <div>
    <el-button type="primary" @click="handleClass">换类名</el-button>
    <el-button type="primary" @click="add">Add</el-button>
  </div>
  <div>
    <div class="container">
      <transition-group name="fade" class="transition-group">
        <Cards v-for="(item,index) in cardsList" :key="item.id" @click="showNumber(item,index)">
          <template #default>
            <p class="text">{{ item.show }}</p>
          </template>
        </Cards>
      </transition-group>
    </div>
    <el-dialog v-model="dialogVisible" title="Tips" width="30%">
      <span>{{showInfo!.show}}</span>
      <el-button type="primary" @click="add2">+1</el-button>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">Cancel</el-button>
          <el-button type="primary" @click="save">
            Confirm
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
  
<script setup lang="ts">
import Cards from '../../components/playing-cards.vue'
import { computed, ref } from 'vue'
import { useStore } from 'vuex'
import type { MyObj } from './types';
const store = useStore()

const cardsList = computed(() => store.state.arr)
const dialogVisible = ref(false)
const showInfo = ref<MyObj>()
const handleClass = () => {
  let res = shuffleArr(cardsList.value)
  store.commit('setStateArray', res)
  console.log(cardsList.value, shuffleArr(cardsList.value))
}
const shuffleArr = (arr:MyObj[]) => {
  const shuffled = [...arr]
  for (let i = shuffled.length - 1; i > 0; i--) {
    const j = Math.floor(Math.random() * (i + 1))
    ;[shuffled[i], shuffled[j]] = [shuffled[j], shuffled[i]]
  }

  console.log('arr', shuffled)
  return shuffled
}
const add = () => {
  store.commit('setStateArray', [
    ...store.state.arr,
    { show: (cardsList.value.length + 1).toString(), number: cardsList.value.length + 1 }
  ])
}
const showNumber = (item:MyObj,index:number) => {
  showInfo.value = {...item,index:index}
  console.log(showInfo.value)
  dialogVisible.value = true
}
const add2 = ()=>{
  showInfo.value!.number++
  showInfo.value!.show = showInfo.value!.number.toString()
}
const save = ()=>{
  cardsList.value[showInfo.value!.index] = showInfo.value
  delete cardsList.value[showInfo.value!.index].index
  store.commit('setStateArray', cardsList.value)
  dialogVisible.value = false
}
</script>
  
<style scoped>
  #app{
    background-color: #cccccc00;
  }
  .text {
    text-align: center;
    line-height: 50%;
    font-size: 80px;
    font: Georgia, Times New Roman, serif;
  }
  .container {
    display: flex;
    position: relative;
    width: 100%;
    height: 300px;
    /* background-color: rgb(90, 168, 168); */
  }
  .transition-group {
    position: relative;
    padding: 0;
  }
  .fade-move,
  .fade-enter-active,
  .fade-leave-active {
    transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1);
  }
  
  .fade-enter-from,
  .fade-leave-to {
    opacity: 0;
    transform: scaleY(0.01) translate(30px, 0);
  }
  
  .fade-leave-active {
    position: absolute;
  }
  .transition-group-enter-active,
  .transition-group-leave-active {
    transition: all 1s;
  }
  
  .transition-group-enter-from,
  .transition-group-leave-to {
    opacity: 0;
    transform: translateY(30px);
  }
</style>
  